import React from 'react'

const Ctrl = ({ isEditing, focus, pages, deleteElm, addTextElm, undo, redo, canUndo, canRedo }) => {
    return (
        <div id="Index-btn">
            <ul>
                <li className="Index-btn-li">
                    <button
                        onClick={undo}
                        disabled={!canUndo}
                        data-am-popover="{theme: 'sm', content: '撤销/Ctrl + Z', trigger: 'hover focus'}"
                    >
                        <i className="icon iconfont">&#xe603;</i>
                    </button>
                </li>
                <li className="icon-hou Index-btn-li">
                    <button
                        onClick={redo}
                        disabled={!canRedo}
                        data-am-popover="{theme: 'sm', content: '重做/Ctrl + Y', trigger: 'hover focus'}"
                    >
                        <i className="icon iconfont">&#xe603;</i>
                    </button>
                </li>
                <li className="Index-btn-li">
                    <button
                        disabled={!focus}
                        onClick={() => deleteElm([focus])}
                        data-am-popover="{theme: 'sm', content: '删除文字/Delete', trigger: 'hover focus'}"
                    >
                        <i className="fa fa-trash"></i>
                        {/*<div className="iTooltipMes">
                            <i className="icon iconfont index-return">&#xe612;</i>
                            <i className="iToolTri iToolTriTop">
                                <i className="iToolTriTopi"></i>
                            </i>
                        </div>*/}
                    </button>
                </li>
                <li className="Index-btn-li">
                    <button
                        onClick={addTextElm}
                        data-am-popover="{theme: 'sm', content: '新增文字', trigger: 'hover focus'}"
                    >
                        <i className="icon iconfont">&#xe6d1;</i>
                    </button>
                </li>
            </ul>
        </div>
    )
}

export default Ctrl